<template>
  <PageSearch @search="reload" />
  <ele-page flex-table style="padding: 0 0 0 5px;">
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      v-model:selections="selections"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      highlight-current-row
      :default-expand-all="false"
    >
      <template #status="{ row }">
        <el-tag v-if="row.is_read === 1">已读</el-tag>
        <el-tag v-else type="danger">未读</el-tag>
      </template>
      <template #content="{ row }">
        <el-link underline="never" @click="goInfo(row)">{{ row.content }}</el-link>
      </template>
      <template #action="{ row }">
        <template v-if="row.is_read === 0">
          <el-popconfirm
            class="relative bottom-2px"
            title="是否标记为已读？"
            placement="left"
            :width="180"
            @confirm="read(row.id)"
          >
            <template #reference>
              <el-link type="danger" underline="never">未读</el-link>
            </template>
          </el-popconfirm>
          <el-divider direction="vertical" />
        </template>
        <el-link type="primary" underline="never" @click="goInfo(row)">查看</el-link>
      </template>
    </ele-pro-table>
  </ele-page>
</template>

<script setup>
import { ref } from 'vue'
import PageSearch from './search.vue'

const props = defineProps({
  type: Number,
})

const router = useRouter()
const { addPageTab, routeTabKey } = utils.usePageTab()
/** 表格实例 */
const tableRef = useTemplateRef('tableRef')

/** 表格选中数据 */
const selections = ref([])

/** 表格列配置 */
const columns = ref([
  {
    type: 'index',
    label: '序',
    width: 55,
    align: 'center',
    fixed: 'left',
  },

  {
    prop: 'content',
    label: '消息内容',
    minWidth: 180,
    align: 'left',
    slot: 'content',
  },
  {
    prop: 'n_type_name',
    label: '消息类型',
    align: 'center',
  },
  {
    prop: 'n_tem_name',
    label: '消息模版',
    align: 'center',
  },
  {
    prop: 'is_read',
    label: '状态',
    slot: 'status',
    align: 'center',
  },
  {
    prop: 'create_time',
    label: '通知时间',
    formatter: row => utils.formatDate(row.create_time),
    align: 'center',
  },
  {
    columnKey: 'action',
    label: '操作',
    fixed: 'right',
    align: 'right',
    slot: 'action',
    width: 140,
  },
])

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  return utils.get('/noticePush/index', { ...where, ...orders, type_id: props.type, page, limit })
}

/** 搜索 */
function reload(where) {
  selections.value = []
  tableRef.value?.reload?.({ page: 1, where })
}

function read(id) {
  utils.post('/noticePush/read', { id }).then((res) => {
    utils.message(res.msg, res.code)
    if (res.success) {
      reload()
    }
  })
}

function goInfo(data) {
  if (data.param && data.obj_val) {
    const param = JSON.parse(data.param)
    if (!param?.path) {
      return
    }
    const path = `${param.path}/${data.obj_val}`
    if (routeTabKey !== path) {
      addPageTab({
        key: path,
        closable: true,
      })
    }
    if (data.is_read === 0) {
      read(data.id)
    }
    router.push(path)
  }
}

// 监听字典id变化
watch(
  () => props.type,
  () => {
    reload({})
  },
)

defineExpose({
  reload,
})
</script>
